<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router';
import Header from './components/Header.vue';
import Footer from './components/Footer.vue';
import { reactive, provide, onMounted, onUnmounted, ref } from 'vue';
import type { Cate, MenuItem } from './types/types.d.ts';
// import getStatus from '@/api/getStatus';
import { userinfo } from '@/stores/counter';
import addViews from './api/addViews';
import loadUserInfo from '@/api/loadUserInfo';
const { viewing } = addViews();
const userInfoCard = ref();
const user = userinfo();
const { loadInfo } = loadUserInfo();
// const { status } = getStatus();
const cates = reactive([
  {
    id: 1,
    name: '科技',
    img: '/assets/imgs/keji.png',
  },
  {
    id: 2,
    name: '教育',
    img: '/assets/imgs/jiaoyu.png',
  },
  {
    id: 3,
    name: '经济',
    img: '/assets/imgs/jingji.png',
  },
  {
    id: 4,
    name: '环境',
    img: '/assets/imgs/huanjing.png',
  },
  {
    id: 5,
    name: '社会',
    img: '/assets/imgs/shehui.png',
  },
  {
    id: 6,
    name: '疫情三年',
    img: '/assets/imgs/yiqing.png',
  },
  {
    id: 7,
    name: '灾难报道',
    img: '/assets/imgs/zainan.png',
  },
  {
    id: 8,
    name: '健康医疗',
    img: '/assets/imgs/jiankang.png',
  },
]);

const MenuCates = [
  {
    id: 1,
    path: '/',
    name: '文章合集',
    cates: cates,
  },
  {
    id: 4,
    path: '/podcast',
    name: '领导信箱',
    cates: null,
  }
];

provide('menuDatas', MenuCates as MenuItem[]);
provide('cates', cates as Cate[]);

function closeUser(e: any) {
  if (!user.showUser) {
    return;
  }
  if (!userInfoCard.value.contains(e.target)) {
    if (e.target.id == 'gosignup' || e.target.id == 'gologin') return;
    user.showUser = false;
  }
}

function getStatus() {
  if (localStorage.getItem('id')) {
    loadInfo();
  }
}
onMounted(async () => {

  getStatus();
  // await status();
  userInfoCard.value = document.getElementById('userInfo');
  document.addEventListener('mousedown', closeUser);
});

onUnmounted(() => {
  document.removeEventListener('mousedown', closeUser);
});
</script>

<template>
  <el-container class="all-main">
    <el-header>
      <Header />
    </el-header>
    <el-main>
      <RouterView />
      <Footer />
    </el-main>
  </el-container>
</template>

<style scoped>
.el-header {
  padding: 0;
  height: fit-content;
}

.el-main {
  padding: 0;
}

.all-main {
  min-width: 1200px;
}

/* 
::v-deep(.el-message) {
  border-color: #fa7c0a !important;
  background-color: #fffcf9 !important;
}

::v-deep .el-message--success .el-message__content {
  color: #fa7c0a !important;
} */
</style>
